iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
0
Mobile Development

前端工程師的 Flutter 新手村挑戰系列 第 3

【前端的 Flutter 新手村】Day3-淺談Flutter的優秀之處

  • 分享至 

  • xImage
  •  

Flutter是由Google創建的UI工具包,使用單一程式庫即可編譯出適用於Mobile、Desktop、Web三個平台的App,因為才剛發展不久,第三方套件庫比較少,但官方提供的UI套件也很夠用,文件也寫得很詳細清楚。Flutter以靜態Widget組建化方式渲染,使用Dart作為開發語言,它更貼近機器語言,不用像Javascript須經過轉換才能與裝置橋接,所以效能也因此提升。

Flutter具備快速開發、可調適的特性:

Fast Development

Flutter支援Hot Reload,開發人員前一秒才剛改完Code,下一秒就能馬上看到App更新後的畫面,無需重新啟動App,可以快速測試、刻介面、修復錯誤。

Flexible UI

使用Widget可以輕鬆地做出符合Material Design的UI介面,而且這些UI帶有流暢的動畫效果,提升App的使用者體驗。

Native Performance

Flutter也針對不同平台做出相對應的UI設計,像是導覽列、滑動效果、字體和圖示等,達到更加出色的原生表現。

https://ithelp.ithome.com.tw/upload/images/20190918/20121111q7Xw2Tbswv.png


針對Web開發人員,官方也對Flutter/Dart與Html/Css做了簡單的比較,讓我們可以”安心的”使用:

Web

<div class="greybox">
  <div class="redbox">
    Lorem ipsum
  </div>
</div>

.greybox {
  background-color: #e0e0e0; /* grey 300 */
  width: 320px;
  height: 240px;
  font: 900 24px Roboto;
  position: relative; 
}
.redbox {
  background-color: #ef5350; /* red 400 */
  padding: 16px;
  color: #ffffff;
  position: absolute;
  top: 24px;
  left: 24px; 
}

Flutter

var container = Container( // grey box
  child: Stack(
    children: [
      Positioned( // red box
        child:  Container(
          child: Text(
            "Lorem ipsum",
            style: bold24Roboto,
          ),
          decoration: BoxDecoration(
            color: Colors.red[400],
          ),
          padding: EdgeInsets.all(16),
        ),
        left: 24,
        top: 24,
      ),
    ],
  ), 
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

前端工程師們有沒有看起來很熟悉呢~就算沒寫過Dart,只要稍微理解一下,也可以輕鬆做出App介面!

接下來我們就盡情敞開心胸玩Flutter吧/images/emoticon/emoticon42.gif


上一篇
【前端的 Flutter 新手村】Day2-為什麼選擇Flutter?React Native、原生開發、PWA不好嗎?
下一篇
【前端的 Flutter 新手村】Day4-在Mac中架設Flutter開發環境(一):更新Android SDK、安裝Xcode
系列文
前端工程師的 Flutter 新手村挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言